{% extends "base.html" %}

{% block title %}编辑分类 - 提示词管理系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="bi bi-pencil"></i> 编辑分类
                </h4>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="name" class="form-label">分类名称 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required 
                               value="{{ category.name }}" placeholder="请输入分类名称" maxlength="50">
                        <div class="form-text">分类名称不能为空，最多50个字符</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">分类描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3" 
                                  placeholder="请输入分类描述（可选）" maxlength="200">{{ category.description or '' }}</textarea>
                        <div class="form-text">最多200个字符</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="color" class="form-label">分类颜色</label>
                        <div class="d-flex align-items-center">
                            <input type="color" class="form-control form-control-color" id="color" name="color" 
                                   value="{{ category.color or '#6c757d' }}" title="选择分类颜色">
                            <span class="ms-2 text-muted">选择一个代表性颜色</span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="enabled" name="enabled" 
                                   {% if category.enabled %}checked{% endif %}>
                            <label class="form-check-label" for="enabled">
                                启用此分类
                            </label>
                            <div class="form-text">禁用后，该分类下的提示词将不会在列表中显示</div>
                        </div>
                    </div>
                    
                    {% if category.id != 'default' %}
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        <strong>提示：</strong>此分类下有 {{ category.prompt_count or 0 }} 个提示词。
                        {% if category.prompt_count > 0 %}
                        删除分类时，这些提示词将移动到默认分类。
                        {% endif %}
                    </div>
                    {% else %}
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>注意：</strong>这是默认分类，不能删除或禁用。
                    </div>
                    {% endif %}
                    
                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ url_for('categories') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回
                            </a>
                            {% if category.id != 'default' %}
                            <button type="button" class="btn btn-outline-danger ms-2" 
                                    onclick="deleteCategory('{{ category.id }}', '{{ category.name }}')">
                                <i class="bi bi-trash"></i> 删除
                            </button>
                            {% endif %}
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> 保存更改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除分类 <strong id="categoryName"></strong> 吗？</p>
                <p class="text-warning"><i class="bi bi-exclamation-triangle"></i> 删除后该分类下的所有提示词将移动到默认分类。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 删除分类函数
function deleteCategory(categoryId, categoryName) {
    document.getElementById('categoryName').textContent = categoryName;
    document.getElementById('deleteForm').action = '/categories/' + categoryId + '/delete';
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// 表单验证
document.querySelector('form').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    if (!name) {
        e.preventDefault();
        alert('请输入分类名称');
        document.getElementById('name').focus();
        return false;
    }
});

// 实时字符计数
document.getElementById('name').addEventListener('input', function() {
    const maxLength = 50;
    const currentLength = this.value.length;
    const formText = this.nextElementSibling;
    formText.textContent = `分类名称不能为空，最多50个字符 (${currentLength}/${maxLength})`;
    
    if (currentLength > maxLength * 0.8) {
        formText.className = 'form-text text-warning';
    } else {
        formText.className = 'form-text';
    }
});

document.getElementById('description').addEventListener('input', function() {
    const maxLength = 200;
    const currentLength = this.value.length;
    const formText = this.nextElementSibling;
    formText.textContent = `最多200个字符 (${currentLength}/${maxLength})`;
    
    if (currentLength > maxLength * 0.8) {
        formText.className = 'form-text text-warning';
    } else {
        formText.className = 'form-text';
    }
});

// 默认分类特殊处理
{% if category.id == 'default' %}
document.getElementById('enabled').disabled = true;
document.getElementById('enabled').checked = true;
{% endif %}
</script>
{% endblock %}